<template>
  <div  class="productProcess">
    <div style="color: aliceblue;margin-top: 10px;font-weight: 700;font-size: 17px;">【生产订单进度】</div>
           <div class="table_body">
                   <div class="table_th">
                    <div class="tr2 th_style">订单编号</div>
                    <div class="tr1 th_style">订单主题</div>
                    <div class="tr3 th_style">交货日期</div>
                    <div class="tr4 th_style">生产进度</div>
                    <div class="tr5 th_style">订单类型</div>
                    <div class="tr5 th_style">计划类型</div>
                   </div>
                   </div>
                   <vue-seamless-scroll
    :data="schedul"
    :class-option="classOption"
    class="seamless-warp"
  >
  <div class="table_main_body">
    <ul class="table_inner_body">
      <li class="table_tr" v-for="(item, index) in schedul" :key="index">
        <span class="trs1" v-text="item.produce_code"></span>
        <span class="trs2" v-text="item.produce_theme"></span>
        <span class="trs3" v-text="item.end_time"></span>
        <span class="trs4" v-text="item.produce_schedule"></span>
        <div class=" trs5">
            <div v-if="item.produce_work_type === '0'">外贸订单</div>
            <div v-if="item.produce_work_type === '1'">国内订单</div>
         </div>
         <span class="trs5" v-text="item.produce_type"></span>
      </li>
      <li class="table_tr" v-for="item in schedul" :key="item.id">
        <span class="trs1" v-text="item.produce_code"></span>
        <span class="trs2" v-text="item.produce_theme"></span>
        <span class="trs3" v-text="item.end_time"></span>
        <span class="trs4" v-text="item.produce_schedule"></span>
        <div class=" trs5">
            <div v-if="item.produce_work_type === '0'">外贸订单</div>
            <div v-if="item.produce_work_type === '1'">国内订单</div>
         </div>
         <span class="trs5" v-text="item.produce_type"></span>
      </li>
    </ul>
  </div>
  </vue-seamless-scroll>
  </div>
 
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "Example04Basic",
  components: {
    vueSeamlessScroll,
  },
  props:{
    schedul:{
             type:Array,
             isGetData:false
         }
         },
  data() {
    return {
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        }
      ],
      classOption:{
        singleHeight: 49,
        waitTime: 2000
    }
    };
  },
};
</script>

<style  scoped>
    .seamless-warp {
    height: 490px;
       overflow: hidden;
   }
   .table_body {
   width: 100%;
 }
 .table_th {
   width: 100%;
   display: flex;
   height: 40px;
   line-height: 40px;
 }
 .tr {
   text-overflow: ellipsis;
   white-space: nowrap;
   box-sizing: border-box;
   text-align: center;
   font-size: 12px;
 }
 .tr1 {
   width: 57%;
 }
 .tr2 {
   width: 40%;
 }
 .tr3 {
   width: 25%;
 }
 .tr4 {
   width: 20%;
 }
 .tr5 {
   width: 25%;
 }
  
 .th_style {
   color: rgb(0, 221, 253);
   font-weight: bold;
   font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
 }
 .table_tr {
   display: flex;
   height: 40px;
   line-height: 40px;
   color: #eee;
   /* font-size: 15px; */
   background: rgba(3, 145, 167, 0.1);
   border: 1px solid rgb(4, 114, 131);
   margin-top: 7px;
   /* margin: 7px; */
 }
 
 .table_tr .trs1 {
    width: 140px;
    margin-left: 20px;
    white-space: nowrap;
    font-size: 12px;
 }
 .table_tr .trs2 {
    width: 180px;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
 }
 .table_tr .trs3 {
    width: 110px;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
 }
 .table_tr .trs4 {
    width: 75px;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
 }
 .table_tr .trs5 {
    width:90px;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
 }
</style>